<template>
  <div class="image-slider">
    <div class="image-slider-container" ref="sliderContainer">
      <div
      @click="jumpTo(item)" 
      class="image-container"
      :style="{ marginRight: index < images.length - 1 ? '15px' : '0' }" 
      v-for="(item, index) in images" 
      :key="item.name">
        <van-image
          class="image"
          fit="fill"
          :src="item.img"
          :width="imageWidth"
          :height="imageHeight"
        >
          <!-- <div class="name">{{ item.name }}</div>
          <div class="type">{{ item.type }}</div> -->
          <slot name="default" :item="item"></slot>
        </van-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    images: {
      type: Array,
      required: true
    },
    imageWidth: {
      type: String,
      default: '100%' // 默认图片宽度为100%
    },
    imageHeight: {
      type: String,
      default: 'auto' // 默认图片高度为自动适应
    },
    imgtype:{
      type:String,
      default:''
    }

  },
  mounted() {
    this.initHorizontalScroll();
    // console.log(this.images[0].img);
  },
  methods: {
    initHorizontalScroll() {
      const container = this.$refs.sliderContainer;
      container.style.overflowX = 'scroll';
    },
    jumpTo(item){
      console.log(item);
      console.log(this.imgtype);

      if(this.imgtype==="hotArtisttype"){
        this.$router.push({name:'artistdetail',params:
        {id:item.name}})
      }else if(this.imgtype==="selecTedopicType"){
        this.$router.push({name:'topicdetail',params:
        {id:item.name}})
      }

  }
}
}
</script>

<style lang="scss" scoped>
.image-slider {
  width: 100%;
  overflow: hidden;
}

.image-slider-container {
  display: flex;
  flex-wrap: nowrap;
}

.image-container {
  flex: 0 0 auto;
  // max-width: 100%;
  overflow: hidden;
}



.image-slider-container::-webkit-scrollbar {
  display: none;
}
</style>
